<template>
    <div>
        <el-card>
            <!-- 搜素部门 添加部门 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入部门的名称" clearable v-model="searchDepStr" @clear="clearSearchEvent">
                        <el-button slot="append" icon="el-icon-search" @click="searchDepHandle"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <el-input placeholder="请输入成员的姓名" clearable v-model="searchNameOrId" @clear="clearSearchEvent2">
                        <el-button slot="append" icon="el-icon-search" @click="searchNameHandle"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-button @click="addDepDialogVisible = true" type="primary">添加部门</el-button>
                    <el-button @click="clearSearchEvent2" type="danger" round>清除所有</el-button>
                </el-col>
            </el-row>
            <!-- 部门及部门成员的表格列表渲染 -->
            <el-table :data="tableData" v-if="(searchIndex == 1)" style="width: 100%" border stripe>
                <!-- 有关具体部门成员信息 -->
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-table :data="scope.row.allUser" border stripe height="250"  class="expand-table">
                            <el-table-column prop="userId" label="学号" width="120">
                            </el-table-column>
                            <el-table-column prop="userName" label="姓名" width="100">
                            </el-table-column>
                            <el-table-column label="性别" width="80">
                                <template slot-scope="scope">
                                    <el-tag type="warning" v-if="scope.row.userGender === 1">女生</el-tag>
                                    <el-tag type="info" v-else>男生</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="userLevel" label="职位" width="80">
                                <template slot-scope="scope">
                                    <el-tag type="success" v-if="scope.row.userLevel === '0'">root</el-tag>
                                    <el-tag type="warning" v-else-if="scope.row.userLevel === '1'">组长</el-tag>
                                    <el-tag type="danger" v-else>成员</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="userState" label="状态" width="80">
                                <template slot-scope="scope">
                                    <el-tag type="success" v-if="scope.row.userState === 0">在岗</el-tag>
                                    <el-tag type="warning" v-else-if="scope.row.userState === 1">毕业</el-tag>
                                    <el-tag type="danger" v-else>离职</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="userMajors" label="专业">
                            </el-table-column>
                            <el-table-column prop="userPhone" label="联系方式">
                            </el-table-column>
                            <el-table-column prop="userEmail" label="邮箱">
                            </el-table-column>
                            <el-table-column label="操作" width="140" fixed="right">
                                <template slot-scope="scope">
                                    <el-button type="primary" icon="el-icon-edit" circle size="mini"
                                        @click="editUserBtn(scope.row)">
                                    </el-button>
                                    <el-button type="danger" icon="el-icon-delete" circle size="mini"
                                        @click="delUserBtn(scope.row)">
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column prop="depId" label="部门ID" width="80">
                </el-table-column>
                <el-table-column prop="depName" label="部门名称">
                </el-table-column>
                <el-table-column prop="depDesc" label="部门描述"> </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button @click="editDepInfoBtn(scope.row)" class="addBtn" size="mini" type="primary">修改部门信息
                        </el-button>
                        <el-button @click="delDepInfoBtn(scope.row.depId)" type="danger" size="mini">删除</el-button>
                        <el-button @click="addUserBtn(scope.row)" type="success" icon="el-icon-circle-plus-outline" size="mini">添加成员</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-table :data="searchTable" class="hello" v-else style="width: 100%" border stripe>
              <el-table-column></el-table-column>
              <el-table-column prop="userId" label="学号" width="120"></el-table-column>
                <el-table-column prop="userName" label="姓名" width="100"></el-table-column>
                <el-table-column prop="userDepartment" label="部门" width="100"></el-table-column>
                <el-table-column label="性别" width="80">
                    <template slot-scope="scope">
                        <el-tag type="warning" v-if="scope.row.userGender === 1">女生</el-tag>
                        <el-tag type="info" v-else>男生</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="userLevel" label="职位" width="80">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.userLevel === 0">root</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.userLevel === 1">组长</el-tag>
                        <el-tag type="danger" v-else>成员</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="userState" label="状态" width="80">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.userState === 0">在岗</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.userState === 1">毕业</el-tag>
                        <el-tag type="danger" v-else>离职</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="userMajors" label="专业"></el-table-column>
                <el-table-column prop="userPhone" label="联系方式"></el-table-column>
                <el-table-column prop="userEmail" label="邮箱"></el-table-column>
                <el-table-column label="操作" width="140" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle size="mini"
                            @click="editUserBtn(scope.row)">
                        </el-button>
                        <el-button type="danger" icon="el-icon-delete" circle size="mini"
                            @click="delUserBtn(scope.row)">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 添加部门弹框 -->
        <el-dialog title="添加部门" :visible.sync="addDepDialogVisible" width="50%" @close="addDepDialogClose">
            <el-form :model="addDepForm" ref="addDepRef" :rules="addDepRules" label-width="100px">
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="addDepForm.name"></el-input>
                </el-form-item>
                <el-form-item label="部门描述" prop="desc">
                    <el-input v-model="addDepForm.desc"></el-input>
                </el-form-item>
            </el-form>
            <!-- 按钮 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDepDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addDepFormHandle">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改部门具体信息的对话框 -->
        <el-dialog title="修改部门信息" :visible.sync="editDepDialogVisible" width="50%">
            <el-form :model="editDepForm" ref="editDepartRef" label-width="100px">
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="editDepForm.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="部门描述" prop="desc">
                    <el-input v-model="editDepForm.desc"></el-input>
                </el-form-item>
            </el-form>
            <!-- 按钮 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDepDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editDepFormHandle">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加成员信息的弹框 -->
        <el-dialog title="添加用户" :visible.sync="addUserDialogVisible" width="50%">
            <el-form :model="addUserForm" :rules="addUserRules" ref="addUserRef" label-width="100px">
                <el-form-item label="学号" prop="userId">
                    <el-input v-model="addUserForm.userId"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="userName">
                    <el-input v-model="addUserForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="专业" prop="userMajors">
                    <el-input v-model="addUserForm.userMajors"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="userGender">
                    <el-select v-model="addUserForm.userGender" placeholder="请选择">
                        <el-option :value="0" label="男生">男生</el-option>
                        <el-option :value="1" label="女生">女生</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位" prop="userLevel">
                    <el-select v-model="addUserForm.userLevel" placeholder="请选择">
                        <el-option :value="0" label="root"></el-option>
                        <el-option :value="1" label="组长"></el-option>
                        <el-option :value="2" label="成员"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式" prop="userPhone">
                    <el-input v-model="addUserForm.userPhone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="userEmail">
                    <el-input v-model="addUserForm.userEmail"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addUserDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUserHandle">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改用户弹窗 -->
        <el-dialog title="修改用户信息" :visible.sync="editUserDialogVisible" width="50%">
            <el-form :model="editUserForm" :rules="editUserRules" ref="editUserRef" label-width="100px">
                <el-form-item label="学号" prop="userId">
                    <el-input v-model="editUserForm.userId" disabled></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="userName">
                    <el-input v-model="editUserForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="专业" prop="userMajors">
                    <el-input v-model="editUserForm.userMajors"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="userGender">
                    <el-select v-model="editUserForm.userGender" placeholder="请选择">
                        <el-option :value="0" label="男生">男生</el-option>
                        <el-option :value="1" label="女生">女生</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位" prop="userLevel">
                    <el-select v-model="editUserForm.userLevel" placeholder="请选择" disabled>
                        <el-option :value="0" label="root"></el-option>
                        <el-option :value="1" label="组长"></el-option>
                        <el-option :value="2" label="成员"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="userState">
                    <el-select v-model="editUserForm.userState" placeholder="请选择" disabled>
                        <el-option :value="0" v-if="editUserForm.userState === 0" label="在岗"></el-option>
                        <el-option :value="1" v-else-if="editUserForm.userState === 1" label="毕业"></el-option>
                        <el-option :value="2" v-else label="离职"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式" prop="userPhone">
                    <el-input v-model="editUserForm.userPhone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="userEmail">
                    <el-input v-model="editUserForm.userEmail"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editUserDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserHandle">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
  data () {
    return {
      // 根据 该字段判断搜索后显示的表格数据
      searchIndex: 1,
      // 渲染表格的数据
      tableData: [],
      // 查询部门的输入信息
      searchDepStr: '',
      // 查询成员是输入的id信息 或者名字
      searchNameOrId: '',
      // 搜索成员信息的数据
      searchTable: [],
      // 添加部门对话框的显示和隐藏
      addDepDialogVisible: false,
      // 添加部门的表单数据
      addDepForm: {
        name: '',
        desc: ''
      },
      // 添加表单的验证规则
      addDepRules: {
        name: [
          { required: true, message: '请输入部门的名称', trigger: 'blur' }
        ]
      },
      // 编辑部门信息对话框显示隐藏
      editDepDialogVisible: false,
      // 编辑部门信息的数据
      editDepForm: {
        name: '',
        desc: ''
      },
      // 存放更改部门信息的ID
      depId: '',
      // 存放部门的名称
      depName: '',
      // 添加用户对话框的显示和隐藏
      addUserDialogVisible: false,
      // 添加用户信息列表
      addUserForm: {
        userId: '',
        userName: '',
        userMajors: '',
        userGender: '',
        userPhone: '',
        userLevel: '',
        userEmail: ''
      },
      // 添加成员的表单规则
      addUserRules: {
        userId: [
          { required: true, message: '请输入成员的学号', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入成员的名称', trigger: 'blur' }
        ],
        userMajors: [
          { required: true, message: '请输入成员的专业', trigger: 'blur' }
        ],
        userGender: [
          { required: true, message: '请输入成员的性别', trigger: 'blur' }
        ],
        userPhone: [
          { required: true, message: '请输入成员的手机号', trigger: 'blur' },
 		      { required: true, pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确',trigger: 'blur'}
        ],
        userLevel: [
          { required: true, message: '请输入成员的职位', trigger: 'blur' }
        ],
        userEmail: [
          { required: true, message: '请输入成员的电子邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
      // 编辑用户的表单数据
      editUserForm: {
        userId: '',
        userName: '',
        userMajors: '',
        userGender: '',
        userPhone: '',
        userEmail: ''
      },
      // 编辑用户信息的对话框显示隐藏
      editUserDialogVisible: false,
      editUserRules: {
        // userId: [
        //   { required: true, message: '请输入成员的学号', trigger: 'blur' }
        // ],
        userName: [
          { required: true, message: '请输入成员的名称', trigger: 'blur' }
        ],
        userMajors: [
          { required: true, message: '请输入成员的专业', trigger: 'blur' }
        ],
        userGender: [
          { required: true, message: '请输入成员的性别', trigger: 'blur' }
        ],
        userPhone: [
          { required: true, message: '请输入成员的手机号', trigger: 'blur' },
 		      { required: true, pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确',trigger: 'blur'}    
        ],
        userEmail: [
          { required: true, message: '请输入成员的电子邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
  // 获取成员信息列表数据
    getTableData () {
      // Vue.prototype.$http = axios
      this.$http.get('/v1/oa/department/changeDep/findAll').then(res => {
      // console.log(res)
        if (res.status !== 200) this.$message.error('获取表格数据出错了')
        // this.$message.success('获取表格数据成功')
        this.tableData = res.data.data
      })
    },
    // 查询部门信息的点击事件
    searchDepHandle () {
    // console.log(typeof(this.searchDepStr))
      const str = this.searchDepStr.trim()
      this.tableData = []
      this.$http({
        method: 'get',
        url: '/v1/oa/department/changeDep/searchDep',
        params: {
          idOrName: str
        }
      }).then(res => {
        if (res.status !== 200) this.$message.error('输入格式不正确，请重新输入')
        //    this.tableData = res.data.data
        //    this.getTableData()
        // console.log(res.data.data)
        this.tableData.push(res.data.data)
      })
    },
    // 查询部门成员的点击事件
    searchNameHandle () {
      const str = this.searchNameOrId.trim()
      this.tableData = []
      this.$http({
        method: 'get',
        url: '/v1/oa/department/changeUser/findUserByUserIdOrName',
        params: {
          idOrName: str
        }
      }).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.searchIndex = 2
          this.searchTable.push(res.data.data.allUser[0])
          console.log(this.searchTable)
        } else {
          this.$http.error('查询失败')
        }
      })
    },
    // 清除搜索事件
    clearSearchEvent () {
      this.getTableData()
    },
    clearSearchEvent2 () {
      this.searchDepStr = ''
      this.searchNameOrId = ''
      this.searchTable = []
      this.getTableData()
      this.searchIndex = 1
    },
    // 搜索部门成员的信息
    searchUserInfo () {
    // console.log()
      const id = this.searchUserId.trim()
      this.tableData.allUser = []
      this.$http({
        method: 'get',
        url: `/v1/oa/User/selectById/${id}`
      }).then(res => {
        console.log(res)
        if (res.data.code !== 200) {
          this.$message.error('查找失败')
        }
        this.tableData.allUser.push(res.data.data)
      })
    },
    // 编辑部门信息的点击按钮
    editDepInfoBtn (row) {
      // console.log(row)
      this.depId = row.depId
      this.editDepForm.name = row.depName
      this.editDepForm.desc = row.depDesc
      this.editDepDialogVisible = true
    },
    // 删除部门的点击按钮
    delDepInfoBtn (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          method: 'delete',
          url: '/v1/oa/department/changeDep/remove',
          params: { depId: id }
        }).then(res => {
        // console.log(res);
          if (res.status !== 200) return this.$message.error('删除失败')
          this.$message.success('删除成功')
          this.getTableData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加部门的提交事件
    addDepFormHandle () {
      this.$http({
        method: 'post',
        url: '/v1/oa/department/changeDep/addDep',
        params: {
          depName: this.addDepForm.name,
          depDesc: this.addDepForm.desc
        }
      }).then(res => {
        if (res.data.code !== 200) this.$message.error('添加失败！')
        // console.log(res)
        this.getTableData()
      })
      this.addDepDialogVisible = false
    },
    // 添加部门对话框关闭事件
    addDepDialogClose () {
      this.$refs.addDepRef.resetFields()
    },
    // 编辑部门信息的提交事件
    editDepFormHandle () {
    // console.log(this.depId,this.editDepForm)
      this.$http({
        method: 'put',
        url: '/v1/oa/department/changeDep/save',
        params: {
          desId: this.depId,
          desName: this.editDepForm.name,
          desDesc: this.editDepForm.desc
        }
      }).then(res => {
        // console.log(res)
        if (res.status !== 200) this.$message.error('修改部门信息失败')
        this.$message.success('修改部门数据成功')
        this.getTableData()
      })
      this.editDepDialogVisible = false
    },
    // 编辑用户按钮
    editUserBtn (row) {
      this.editUserDialogVisible = true
      console.log(row)
      this.editUserForm = row
    },
    // 点击添加成员的按钮
    addUserBtn (row) {
      // console.log(row)
      this.depId = row.depId
      this.depName = row.depName
      this.addUserDialogVisible = true
    },
    // 添加成员的提交事件
    addUserHandle () {
      console.log(this.addUserForm)
      this.$http.post('/v1/oa/department/changeUser/adduser',
        {
          userDepartment: this.depName,
          userId: this.addUserForm.userId,
          userName: this.addUserForm.userName,
          userMajors: this.addUserForm.userMajors,
          userGender: this.addUserForm.userGender,
          userLevel: this.addUserForm.userLevel,
          userPhone: this.addUserForm.userPhone,
          userEmail: this.addUserForm.userEmail
        }).then(res => {
        if (res.data.code !== 200) this.$message.error('添加成员失败！')
        this.getTableData()
      })
      this.addUserDialogVisible = false
    },
    // 编辑用户信息的提交事件
    editUserHandle () {
      this.$http.put('/v1/oa/department/changeUser/saveUser',
        {
          userId: this.editUserForm.userId,
          userName: this.editUserForm.userName,
          userMajors: this.editUserForm.userMajors,
          userGender: this.editUserForm.userGender,
          userPhone: this.editUserForm.userPhone,
          userEmail: this.editUserForm.userEmail
        }).then(res => {
        console.log(res)
        if (res.status !== 200) return this.$message.error('修改用户信息失败')
        this.$message.success('修改用户信息成功成功')
        this.getTableData()
        this.editUserDialogVisible = false
      })
    },
    // 删除用户的点击事件
    delUserBtn (row) {
    // console.log(id.userId)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          method: 'delete',
          url: `/v1/oa/department/changeUser/removeUser/${row.userId}`
        }).then(res => {
        // console.log(res);
          if (res.status !== 200) return this.$message.error('删除失败')
          this.$message.success('删除成功')
          this.getTableData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.btn {
  margin-left: 20px;
}
.tag {
    font-size: 20px;
    margin: 0 20px;
}

</style>
